<template>
    <div class="page-wrap">
      <basic-container>
        <div class="container search">
            <el-form
                    :model="sortingSearchForm"
                    :inline="true"
                    label-width="100px">
                <el-form-item label="配送日期:">
                    <el-date-picker
                            v-model="sortingSearchForm.deliveryDate"
                            clearable
                            type="date" placeholder="选择日期"
                            value-format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="配送批次:">
                    <el-select
                            v-model="sortingSearchForm.deliverySeq"
                            clearable
                            placeholder="请选择">
                        <el-option
                                v-for="item in buySeqOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="采购商:">
                    <buyer-check v-model="sortingSearchForm.buyerId"></buyer-check>
                </el-form-item>
                <el-form-item label="商品名称">
                    <el-input
                            v-model="sortingSearchForm.goodsName"
                            placeholder=""></el-input>
                </el-form-item>
                <el-form-item label=" ">
                    <el-button
                            type="primary"
                            @click="fetchSortingList">搜索
                    </el-button>
                    <el-button
                            round
                            type="primary"
                            @click="sortingFinish">批量分拣完成
                    </el-button>
                    <el-button
                            round
                            @click="exportClick">分拣单导出
                    </el-button>

                </el-form-item>
            </el-form>
            <div class="tabs">
              <div :class="{active:2==t_current}" @click="toggleList(2)">待分拣</div>
              <div :class="{active:3==t_current}" @click="toggleList(3)">已分拣</div>
              <div :class="{active:4==t_current}" @click="toggleList(4)">已完成</div>
            </div>
        </div>

        <div class="container body" v-loading="loading" style="width: 100%;">
            <div class="check-block">
                <div>
                    <span>易联云打印机:</span>

                  <div style="display: inline-block; margin-left: 10px;">
                    <el-select
                      v-model="printerSn"
                      placeholder="选择打印机" clearable
                      @change="savePrinterInfo">
                      <el-option
                        v-for="item in printerList"
                        :key="item.id" :label="item.name"
                        :value="item.machineCode">
                      </el-option>
                    </el-select>
                  </div>

                </div>
                <div>
                    <span>打印规格:</span>
                  <div style="display: inline-block; margin-left: 10px;">
                    <el-select v-model="printType" clearable
                               placeholder="选择易联云打印机打印规格"
                               @change="savePrinterInfo">
                        <el-option v-for="item in printList"
                                   :key="item.value"
                                   :label="item.label"
                                   :value="item.value"></el-option>
                    </el-select>
                  </div>
                </div>
                <div>
                    <span>飞鹅打印机:</span>
                    <div style="display: inline-block; margin-left: 10px;">
                      <el-select v-model="feieSn" clearable
                      placeholder="选择飞鹅打印机"
                      @change="saveFeieInfo">
                          <el-option
                          v-for="item in feieList"
                          :key="item.id" :label="item.printerName"
                          :value="item.printerSn">
                          </el-option>
                      </el-select>
                    </div>
                </div>
            </div>
            <el-table
                    :data="sortingList" border
                    :header-cell-style="thStyle">
                <el-table-column type="index"></el-table-column>
                <el-table-column label="客户名称" prop="buyerName" sortable></el-table-column>
                <el-table-column label="商品名称" sortable>
                    <template slot-scope="scope">
                        <el-popover
                                trigger="hover"
                                placement="top"
                                width="120px">
                            <p>{{ scope.row.goodsName }}</p>
                            <div slot="reference">
                                <p class="text-ellipsis">{{ scope.row.goodsName}}</p>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column
                        label="规格"
                        prop="goodsModelName"
                        width="100">
                </el-table-column>
                <el-table-column
                        label="单位"
                        prop="goodsUnit"
                        width="100">
                </el-table-column>
                <el-table-column
                        label="订购数量"
                        prop="purchaseNumber"
                        width="100">
                </el-table-column>
                <el-table-column label="配送日期" prop="deliveryDate" width="100" sortable>
                </el-table-column>
                <el-table-column label="批次" prop="deliverySeq" width="80" sortable>
                    <template  slot-scope="scope">
                        {{fetchLabel(scope.row.deliverySeq)}}
                    </template>
                </el-table-column>
                <el-table-column label="备注">
                    <template slot-scope="scope">
                        <el-popover trigger="hover"
                                    placement="top"
                                    width="120px">
                            <p>{{ scope.row.remarks }}</p>
                            <div slot="reference">
                                <p class="text-ellipsis">{{ scope.row.remarks}}</p>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column label="实际数量" width="150">
                    <template slot-scope="scope">
                        <el-input
                                v-model="scope.row.sortingNumber"
                                placeholder="分拣量"
                                :disabled="!scope.row.isEdit">
                        </el-input>
                    </template>
                </el-table-column>
                <el-table-column label="分拣状态" width="100">
                    <template slot-scope="scope">
                        <p v-if="scope.row.sortingStatus == 2">待分拣</p>
                        <p v-if="scope.row.sortingStatus == 3">已分拣</p>
                        <p v-if="scope.row.sortingStatus == 4">已完成</p>
                    </template>
                </el-table-column>
                <el-table-column label="管理操作" width="150">
                    <template slot-scope="scope">
                        <el-button v-if="!scope.row.isEdit"
                                   type="primary" size="mini"
                                   @click="handleEdit(scope.$index, scope.row)">修改
                        </el-button>
                        <el-button v-if="scope.row.isEdit"
                                   type="success" size="mini"
                                   @click="handleSave(scope.$index, scope.row)">保存
                        </el-button>
                        <el-button type="mini"
                                   @click="handlerPrint(scope.$index, scope.row)">打印
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-footer>
                <div class="page-box">
                    <div></div>
                    <my-pagination
                            :page-size="size"
                            :current-page="current"
                            :total="total"
                            :layout="layout"
                            :page-sizes="[20,50,100,500,1000]"
                            @pagechange="handlePageChange">
                    </my-pagination>
                </div>
            </el-footer>
        </div>

        <!-- excel导出 -->
        <!--<el-dialog title="分拣单导出" :visible.sync="dialogPrint" width="90%">-->
        <!--<div id="excelExportDiv" >-->
            <!--<el-row>-->
                <!--<a class="el-button el-button&#45;&#45;small primary is-round"-->
                   <!--id="excelBtn" href @click="exportExcel">导出excel-->
                <!--</a>-->
            <!--</el-row>-->
            <!--<el-table-->
                    <!--id="tableExcel"-->
                    <!--v-loading="loading"-->
                    <!--:data="sortingList"-->
                    <!--border-->
                    <!--stripe-->
                    <!--&gt;-->
                <!--<el-table-column type="index" ></el-table-column>-->
                <!--<el-table-column label="客户名称" prop="buyerName" sortable></el-table-column>-->
                <!--<el-table-column label="商品名称" prop="goodsName" sortable></el-table-column>-->
                <!--<el-table-column label="规格" prop="goodsModel"></el-table-column>-->
                <!--<el-table-column label="单位" prop="unit"></el-table-column>-->
                <!--<el-table-column label="订购数量" prop="buyNum" ></el-table-column>-->
                <!--<el-table-column label="配送日期" prop="deliveryDate" sortable></el-table-column>-->
                <!--<el-table-column label="批次" prop="deliverySeq" sortable>-->
                    <!--<template slot-scope="scope">-->
                        <!--{{$dic.buySeqOptions[scope.row.buySeq].label}}-->
                    <!--</template>-->
                <!--</el-table-column>-->
                <!--<el-table-column label="备注" prop="buyNode"></el-table-column>-->
                <!--<el-table-column label="实际数量" prop="sortOutNum"></el-table-column>-->
                <!--<el-table-column label="分拣状态" sortable>-->
                    <!--<template slot-scope="scope">-->
                        <!--<span v-if="scope.row.sortingStatus == 2">待分拣</span>-->
                        <!--<span v-if="scope.row.sortingStatus == 3">已分拣</span>-->
                    <!--</template>-->
                <!--</el-table-column>-->
            <!--</el-table>-->
        <!--</div>-->

            <!-- excel导出2 -->
            <el-dialog title="分拣单导出" :visible.sync="dialogPrint" width="90%">
                <div id="excelExportDiv" >
                    <el-row>
                        <a class="el-button el-button--small primary is-round"
                           id="excelBtn" href @click="exportExcel">导出excel
                        </a>
                    </el-row>
                    <div id="tableExcel">
                    <el-row>
                        <el-col>配送日期{{sortingSearchForm.deliveryDate}}</el-col>
                    </el-row>
                    <el-table
                            :data="excelData"
                            border>
                        <el-table-column
                                v-for="(item,index) in excelTitle"
                                :key="index"
                                :prop="item.prop"
                                :label="item.label">
                        </el-table-column>
                    </el-table>
                    </div>
                </div>
        </el-dialog>
      </basic-container>
    </div>
</template>

<script>
    import Request from './request.js'
    import mixins from '../sortingStation/mixins/index.js'
    import excel from "@/util/pds/exportExcel.js";

    import{
        sortedDetail,
        fetchDetailList,
        finishBatch
    } from "../../../api/scm/warehouse/sortingrecord";

    export default {
        mixins: [mixins],
        data: function () {
            return {
                // 分页
                size: 20,
                current: 1,
                total: 0,
                layout: "total, sizes, prev, pager, next, jumper",

                request: new Request(),
                pmId: '',
                sortingSearchForm: {
                    deliveryDate: this.today,
                    deliverySeq:'',
                    buyerId:'',
                    goodsName:'',
                    sortingStatus: '2',
                    pmId: '',
                },
                sortingList: [],

                buySeqOptions: this.$dic.buySeqOptions,
                buyerOptions: [],
                loading: false,
                // excel导出
                dialogPrint:false,
                excelTitle: this.initTitle(),
                excelData:[],
                t_current:2
            };
        },
        computed: {
            today() {
                let now = new Date()
                return this.$utils.formatDate(now, 'yyyy-MM-dd')
            }
        },
        created() {
            this.pmId = this.getStore({name: "pmId"});
        },
        mounted() {
            this.fetchSortingList()
        },
        methods: {
            handlePageChange(e) {
                this.size = e.pageSize;
                this.current = e.pageNo;
                this.fetchSortingList();
            },
            fetchSortingList() {
                this.loading = true;
                this.sortingSearchForm.pmId = this.pmId;
                let params = this.sortingSearchForm
                params.size = this.size;
                params.current = this.current;
                fetchDetailList(params).then(res => {
                    if (res.data.code === 0) {
                        this.sortingList = res.data.data.records;
                        this.size = res.data.data.size;
                        this.current = res.data.data.current;
                        this.total = res.data.data.total;
                    }else {
                        this.sortingList = [];
                    }
                    this.loading = false;
                });
            },
            toggleList(type){
              this.t_current = type;
              this.sortingSearchForm.sortingStatus = type;
              this.fetchSortingList();
            },
            fetchLabel(value){
                let item = this.$dic.buySeqOptions[value];
                return item ? item.label : '';
            },
            /**
             * 表格样式
             */
            thStyle() {
                return {
                    background: '#494949',
                    color: '#fff'
                }
            },
            handleEdit(index, row) {
                this.$set(row, 'isEdit', true)
            },
            handleSave(index, row) {
                if (row.sortingNumber < 0) {
                    this.$message.error('实际数量应该大于0')
                    return;
                }
                this.$set(row, 'isEdit', false)
                let params = {
                    pmId: this.pmId,
                    sortingDetailSn: row.sortingDetailSn,
                    sortingNumber: row.sortingNumber
                }
                sortedDetail(params).then(res => {
                    if (res.data.data === true) {
                        this.$message.success('分拣成功!')
                    } else {
                        this.$message.warning('分拣失败!当前状态不可操作');
                    }
                    this.fetchSortingList();
                })
            },
            // resetForm() {
            //     this.sortingSearchForm = {}
            // },
            handlerPrint(index, row) {
                if (!row.sortOutNum) {
                    this.$message.error('请填写实际分拣数量')
                    return
                }
                this.printTicket(row)
            },
            // 一键确认分拣完成
            sortingFinish(){
                // 数据处理
                if(!this.sortingSearchForm.deliveryDate || !this.sortingSearchForm.deliverySeq){
                    this.$message.warning("请选择配送日期和批次");
                    return;
                }
                let params = {
                    pmId: this.pmId,
                    deliveryDate: this.sortingSearchForm.deliveryDate,
                    deliverySeq: this.sortingSearchForm.deliverySeq
                }
                finishBatch(params).then(res => {
                    if (res.data.code === 0) {
                        this.$message.success(res.data.msg);
                    } else {
                        this.$message.warning(res.data.msg);
                    }
                });
            },
            // 导出excel数据
            exportClick(){
                // 数据处理
                if(!this.sortingSearchForm.deliveryDate){
                    this.$message.warning("请选择配送日期");
                    return;
                }
                let sortingList = this.sortingList;
                let excelTitle = this.initTitle();
                let excelData = [];
                if(sortingList.length === 0){
                    this.$message.warning("无可分拣商品");
                    return;
                }
                // 表头填入商家  excelTitle  label   prop对应buyerId
                let titleMap = new Map();
                // 每行为单品  excelData goodsModelId 对应一行数据 buyerId 对商品数量
                let dataMap = new Map();
                sortingList.forEach(ele =>{
                    titleMap.set(ele.buyerId, ele.buyerName);
                    if(dataMap.has(ele.goodsModelId)){
                        dataMap.get(ele.goodsModelId)[ele.buyerId] = ele.purchaseNumber;
                    }else{
                        let obj = {};
                        obj[ele.buyerId] = ele.purchaseNumber;
                        obj['goodsName'] = ele.goodsName;
                        obj['goodsModelName'] = ele.goodsModelName;
                        obj['goodsUnit'] = ele.goodsUnit;
                        dataMap.set(ele.goodsModelId, obj);
                    }
                });
                titleMap.forEach(function (value, key, map) {
                    excelTitle.push({
                        prop: key,
                        label: value,
                    },{
                        prop: key+'s',
                        label: '分拣量',
                    });
                });
                dataMap.forEach(function (value, key, map) {
                    excelData.push(value);
                });
                console.table("excelTitle", excelTitle);
                console.table("excelData", excelData);
                this.excelTitle = excelTitle;
                this.excelData = excelData;
                this.dialogPrint=true;
            },
            exportExcel(){
                let str = this.$utils.getDiffDate(0);
                excel.getExcel("tableExcel","","分拣单"+str+".xls","excelBtn");
            },
            initTitle(){
                return [{
                    label: "商品",
                    prop: "goodsName"
                },{
                    label: "规格",
                    prop: "goodsModelName"
                },{
                    label: "单位",
                    prop: "goodsUnit"
                }];
            }
        }
    };

</script>

<style scoped lang="scss">
    .tabs{
      overflow: hidden;
    }
    .tabs div{
      width: 100px;
      text-align: center;
      float: left;
      border-bottom: 2px solid #eee;
      cursor: pointer;
      padding-bottom: 10px;
    }
    .tabs .active{
      border-color: #1E90FF;
    }
    .page-wrap {
        height: 100%;
    }

    .search,
    .body {
        background: #fff;
    }

    .search {
        padding-top: 20px;
        .el-form-item--small.el-form-item {
            margin-top: 5px;
            margin-bottom: 5px;
        }

        font-size: 16px;
    }

    .body {
        position: relative;
        height: calc(100vh - 200px);
        min-height: 600px;
        margin-top: 10px;
        overflow: auto;
        .check-block {
            display: flex;
            justify-content: space-between;
            > div {
                padding-bottom: 10px;
            }
        }

        .print {
            font-size: 14px;
            padding: 10px;
            text-align: right;
        }

        .inner {
            height: 100%;
        }

        .right {
            padding: 10px;
        }

        .name-wrapper {
            width: 160px;
        }

        .text-ellipsis {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }

    }
    .check-block{
      margin-bottom: 10px;
      padding: 0 10px;
    }

</style>
